<template>
  <el-container class="custom-form-attr">
    <el-tabs type="border-card" :stretch="true">
      <el-tab-pane label="组件属性">
        <BaseForm ref="CustomFormAttr" :formItemConfigGroup="formItemConfigGroup" />
        <el-button @click="submitForm">保存</el-button>
      </el-tab-pane>
      <el-tab-pane label="表单属性">
        <BaseForm ref="CustomFormConfig" :formItemConfigGroup="formConfigItemConfigGroup" />
        <el-button @click="submitFormConfig">保存</el-button>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>
<script lang="ts">
import BaseForm from "../base-form.vue";
import { FormType, FormItemConfigGroup, BaseFormComponent } from "@/component-interface";
import { defineComponent } from "vue";
import tableApi from "@/api/table.api";
export default defineComponent({
  name: "CustomFormAttr",
  components: { BaseForm },
  data() {
    return {
      attrData: {},
      formConfig: {},
      formItemConfigGroup: [
        {
          label: "名称",
          prop: "label",
          type: FormType.ElInput,
        },
        {
          label: "分栏",
          prop: "span",
          type: FormType.ElSelect,
          options: [{
            value: 6,
            label: 6
          }, {
            value: 12,
            label: 12,
          }, {
            value: 24,
            label: 24,
          }]
        },
        {
          label: "数据库",
          prop: "tableName",
          type: FormType.ElSelect,
          options: [],
          onChange: async (data) => {
            // 初始化字段选项
            (this as any).formItemConfigGroup[3].options = await (this.tableList as any).find((table: { tableName: any; }) => table.tableName === data.tableName).customTableFields.map((field: any) => {
              return {
                value: field.fieldName,
                label: field.fieldCnName
              }
            })
            data.field = ""
          }
        }, {
          label: "字段",
          prop: "field",
          type: FormType.ElSelect,
          options: []
        }
      ] as FormItemConfigGroup,
      formConfigItemConfigGroup: [{
        label: "文本对齐",
        prop: "labelPosition",
        type: FormType.ElSelect,
        options: [
          { value: "right", label: "居右" },
          { value: "left", label: "居左" },
          { value: "top", label: "居上" }
        ]
      },] as FormItemConfigGroup,
      tableList: []
    }
  },
  computed: {

  },
  methods: {
    setAttrData(attrData: any) {
      this.attrData = attrData;
      (this.$refs.CustomFormAttr as BaseFormComponent).setFormData(attrData);
    },
    setFormConfig(formConfig: any) {
      console.log(formConfig)
      this.formConfig = formConfig;
      (this.$refs.CustomFormConfig as BaseFormComponent).setFormData(formConfig);
    },
    getTable() {
      tableApi
        .find({})
        .then((res) => {
          const { code, content } = res.data;
          if (code === 0) {
            this.tableList = content.result;
            this.formItemConfigGroup[2].options = this.tableList.map((table: any) => {
              return {
                value: table.tableName,
                label: table.tableCnName,
              }
            });
          }
        });
    },
    submitForm() {
      this.$emit("submitForm", this.attrData)
    },
    submitFormConfig() {
      this.$emit("submitFormConfig", this.formConfig)
    }
  },
  created() {
    this.getTable()
  }

});
</script>

<style lang="scss" scoped>
.custom-form-attr {
  background: #fff;
  height: 100%;
}
</style>
